<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="Form" :inline="true"  label-width="90px">
          <el-form-item label="日期：" prop="dateTtime">
            <el-date-picker
               v-model="dateTtime"
               value-format="yyyy-MM-dd"
               type="date"
               placeholder="选择日期">
             </el-date-picker>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 10px;">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
         </el-form>
         <div class="charts"   >
            <div class="chartdom1Box">
                <div  ref="myChartdom1" class="chartdom1"></div>
                <!-- <div class="title">全区午睡人数：{{sleepTotal||0}}人</div> -->
            </div>
            <div  class="top3">
                <el-table  :data="top3List">
                  <el-table-column type="index" label="名次" align="center" />
                  <el-table-column label="园所名称" align="center" prop="schoolName" />
                  <el-table-column label="1星" align="center" prop="sleep1" />
                  <el-table-column label="2星" align="center" prop="sleep2" />
                  <el-table-column label="3星" align="center" prop="sleep3" />
                  <el-table-column label="4星" align="center" prop="sleep4" />
                  <el-table-column label="5星" align="center" prop="sleep5" />
                  <el-table-column label="平均睡眠时长" align="center" min-width="100px" prop="avgTime" />
                </el-table>
            </div>
            <div  ref="myChartdom3" class="chartdom3"></div>
          </div>
    </div>
</template>
<script>
import moment from "moment";
import { getRegionSleep,getSleepStatistics } from "@/api/qu/qyyerygk";
import { formatDateOnly} from "@/utils";
 export default {
   name: "qywsgk",
   data() {
     return {
        dateTtime:new Date(),
        queryParams:{

        },
        sleepTotal:0,//全区午睡总人数
        siestaList:[
            {name:'1星',value:0},
            {name:'2星',value:0},
            {name:'3星',value:0},
            {name:'4星',value:0},
            {name:'5星',value:0},
            {name:'0星',value:0},
        ],
        top3List:[
        ],
        siestaAverage:[],
        schoolTitle:'各园平均运动量情况',
        myCharts1:null,
        myCharts2:null,
        previousDate:''
     };
   },
   created() {
    // 获取当前日期
    const currentDate = new Date();
    // 获取前一天的日期
    this.previousDate = new Date(currentDate);
    this.previousDate.setDate(currentDate.getDate() - 1);
    this.dateTtime = formatDateOnly(this.previousDate)
    this.getList()
    this.getSleepStatistics()
   },
   mounted(){
     this.myCharts1 = this.$echarts.init(this.$refs.myChartdom1)
     this.myCharts3 = this.$echarts.init(this.$refs.myChartdom3);
     this.myChartsFn1()
     this.myChartsFn3()
     window.addEventListener("resize", this.monitorResize);
   },
   methods: {
    async getList(){
            try {
              const params = {
                sleepDate:this.dateTtime,
              }
             const data =  await getRegionSleep(params)
             this.siestaList[0].value = data.data.sleep1||0;
             this.siestaList[1].value = data.data.sleep2||0;
             this.siestaList[2].value = data.data.sleep3||0;
             this.siestaList[3].value = data.data.sleep4||0;
             this.siestaList[4].value = data.data.sleep5||0;
             this.siestaList[5].value = data.data.sleep0||0;
             this.sleepTotal = data.data.sleepTotal
              this.myChartsFn1()
            } catch (error) {
              console.log(error);
            }
    },
    async getSleepStatistics(){
      try {
            const params = {
              sleepDate:this.dateTtime,
            }
            const data =  await getSleepStatistics(params)
            this.top3List = data.rows
            this.siestaAverage = data.rows.map(item =>{
              return {
                name: item.schoolName,
                value: item.avgTimemyCharts1
              }
            })
            this.myChartsFn3()
          } catch (error) {
              console.log(error);
          }
    },
     //全区幼儿运动情况
     myChartsFn1(){
       console.log(this.echartList);
         const option = {
             title: [
               {
                 text: '全区幼儿午睡情况',
                 left: 'left'
               },
             ],
            //  toolbox: {
            //    show: true,
            //    feature: {
            //      saveAsImage: { show: true , title: '下载'}
            //    }
            //  },
             legend: {
             type: 'scroll',
             orient: 'vertical',
             left: 'right',
             top: 0,
             bottom: 0,

           },
             tooltip: {
               trigger: 'item',
            //    formatter: '{a} <br/>{b} : {c} ({d}%)'
             },
             series: [
               {
                 name:'全区睡眠时长分布图',
                 type: 'pie',
                 radius: '48%',
                 center: ['50%', '50%'],
                 data:  this.siestaList,
                 label: {
                   position: 'outer',
                   alignTo: 'none',
                   bleedMargin: 5
                 },
                 left: 0,
                //  right: '45%',
                 top: 0,
                 bottom: 0
               },
             ]
             };
           // 使用刚指定的配置项和数据显示图表
           this.myCharts1.setOption(option,true);
           window.addEventListener("resize", this.monitorResize);
     },
      //柱状图
      myChartsFn3(){
         const option = {
        // backgroud:'#333',
        title: {
             text: '各园平均午睡时长统计',
            //  subtext: 'Fake Data',
             left:'left'
           },
           dataZoom:{
           bottom:0,
           show:12/this.siestaAverage.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.siestaAverage.length*100
         },
        tooltip: {
             trigger: 'axis',
             axisPointer: {
             type: 'shadow'
             }
         },
        //  toolbox: {
        //        show: true,
        //        feature: {
        //          saveAsImage: { show: true , title: '下载'}
        //        }
        //      },
         legend: {},
         grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
         },
         xAxis: [
             {
             type: 'category',
             axisLabel: {//x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
             },
             // data:this.echartList.map((item) => item.name)
             data:this.siestaAverage.map((item) => item.name)
             }
         ],
         yAxis: [
             {
             type: 'value'
             }
         ],
         color:['#2f89cf','#27d08a'],
         series: [
             {
                 name: '各园平均午睡时长',
                 type: 'bar',
                 // stack: 'Ad',
                 emphasis: {
                     focus: 'series'
                 },
                 barWidth:80,
                 label: {
                   show: true,
                   position: 'inside',
                   fontSize: 15
                 },
                 // data: this.echartList.map((item) => item.value),
                 data:this.siestaAverage.map((item) => item.value),
             },
         ]
         }
           // 使用刚指定的配置项和数据显示图表
           this.myCharts3.setOption(option,true);
           window.addEventListener("resize", this.monitorResize);
     },
     handleQuery(){
      this.getList()
      this.getSleepStatistics()
     },
     resetQuery(){
      this.dateTtime = formatDateOnly(this.previousDate)
      this.getList()
      this.getSleepStatistics()
     },
    //地图监听窗口缩放事件
      monitorResize(){
       this.myCharts1.resize();
       this.myCharts3.resize();
     },
   }
 };
</script>
<style lang="scss" scoped>
.charts{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    height:840px;
    margin-top: 20px;
    margin-bottom: 50px;
    .chartdom1Box{
        position: relative;
        width: 40%;
        height: 50%;

        .chartdom1{
          width: 100%;
          height: 100%;
        }
        .title{
            position: absolute;
            bottom: 20px;
            left: 40%;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
        }
    }
    .top3{
        width: 50%;
        height: 50%;

    }
    .chartdom3{
        margin-top: 50px;
        width: 90%;
        height: 50%;
    }
}
</style>
